<template>
	<view class="container">
		<view class="top">
			<view class="time-view">
				<view class="time" :class="timeType === 0 ? 'time-check': ''" @click="timeClick(0)">
					日
				</view>
				<view class="time" :class="timeType === 1 ? 'time-check': ''" @click="timeClick(1)">
					周
				</view>
				<view class="time" :class="timeType === 2 ? 'time-check': ''" @click="timeClick(2)">
					月
				</view>
			</view>
			<view class="search-view">
				<u-input v-if="timeType === 0" v-model="day" type="select" placeholder="请选择日期" :border="true" @click="dayShow = true"/>
				<u-input v-if="timeType === 2" v-model="teacherInfo.label" type="select" placeholder="请选择教保师" :border="true" @click="show = true"/>
			</view>
		</view>
		<view v-if="timeType === 0" class="content-day">
			<view class="head">
				<view class="name">
					姓 名
				</view>
				<view class="state">
					出 勤
				</view>
			</view>
			<view v-for="(item, index) in dayList" :key="index" class="day-item" :class="index%2=== 0 ? 'day-item-gray':''">
				<view class="name">
					{{item.childrenName}}
				</view>
				<view class="state">
					<view style="color: #28A871;">
						签到: {{formatTime(item.checkInTime, 'hh:MM:ss')}}
					</view>
					<view style="color: #FF7439;">
						签退: {{formatTime(item.checkOutTime, 'hh:MM:ss')}}
					</view>
				</view>
			</view>
			<view v-if="dayList.length === 0" style="margin-top: 20rpx;">
				今天没有暂时还没有教保师打卡
			</view>
		</view>
		<view v-if="timeType === 1" class="content-week">
			<view class="top-date-view">
				<view class="circle-date" @click="leftClick">
					<u-icon name="arrow-left" color="#ffffff"></u-icon>
				</view>
				<text class="title">
					{{beginDateStr}}-{{endDateStr}}
				</text>
				<view class="circle-date" @click="rightClick">
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
			</view>
			<u-table fontSize="18">
				<u-tr>
					<u-th>姓名</u-th>
					<u-th>周一</u-th>
					<u-th>周二</u-th>
					<u-th>周三</u-th>
					<u-th>周四</u-th>
					<u-th>周五</u-th>
					<u-th>周六</u-th>
					<u-th>周日</u-th>
				</u-tr>
				<view v-if="maxCount > 0">
					<u-tr v-for="(item, index) in maxCount">
						<!-- <u-td class="td">1</u-td> -->
						<view class="td">
							<u-td >
								<view>{{weekList[index].realName}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[0]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[1]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[2]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[3]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[4]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[5]]}}</view>
							</u-td>
						</view>
						<view class="td">
							<u-td >
								<view>{{weekList[index][weekNameList[6]]}}</view>
							</u-td>
						</view>
					</u-tr>
				</view>
				<u-empty v-else class="noContent" text="暂时没有内容哦～"  mode="list"></u-empty>
			</u-table>
		</view>
		<view v-if="timeType === 2" class="content-month">
			<uni-calendar :insert="true" :lunar="false"  :selected="selected"
				@change="change" @monthSwitch="monthSwitch"/>
			<u-table v-if="checkInfo">
				<u-tr>
					<u-th>入园时间</u-th>
					<u-th>离园时间</u-th>
					<u-th>状态</u-th>
					<u-th>入园附件</u-th>
					<u-th>离园附件</u-th>
				</u-tr>
				<u-tr>
					<u-td class="td">{{formatTime(checkInfo.checkInTime, 'hh:MM:ss')}}</u-td>
					<u-td class="td">{{formatTime(checkInfo.checkOutTime, 'hh:MM:ss')}}</u-td>
					<u-td class="td">{{dictFilter(checkInfo.status, 'checkState')}}</u-td>
					<u-td class="td"><view @click="imgClick(checkInfo.checkInMediaUrl)">{{checkInfo.checkInMediaUrl ? '查看':'-'}}</view></u-td>
					<u-td class="td"><view @click="imgClick(checkInfo.checkOutMediaUrl)">{{checkInfo.checkOutMediaUrl ? '查看':'-'}}</view></u-td>
				</u-tr>
			</u-table>
		</view>
		<u-picker v-model="dayShow" mode="time" @confirm="dayConfirm"></u-picker>
		<u-select v-model="show" :list="teachetList" label-name="realName" value-name="id" @confirm="teacherConfirm"></u-select>
	</view>
</template>

<script>
	import {
		getStaffCheck,
		getStaffCheckList,
		getMonthRecordByTch,
		getDailyRecordByTch
	} from '../../api/check.js'
	import {
		getWeekFirstDay,
		getWeekLastDay,
		formatDate,
		isEmpty
	} from '@/utils/utils.js'
	import { getContactTeachers } from '@/api/common.js'
	import {
		formatDateByTimestamp,
	} from '@/utils/utils';
	import dictMixin from '@/mixins/dict'
	export default {
		mixins: [dictMixin],
		data() {
			return {
				timeType: 0,
				
				dayList: [],
				day: '',
				dayShow: false,
				
				month: formatDateByTimestamp(Date.now(), 'yyyy/mm'),
				selected: [],
				checkInfo: null,

				show: false,
				teacherInfo: {},
				teachetList: [],
				
				beginDateStr: '',
				endDateStr: '',
				position: 0,
				weekList: [],
				weekNameList: [],
				maxCount: 5,
			}
		},
		onLoad() {
			getContactTeachers().then(res => {
				this.teachetList = res.data;
			})
			this.getWeekDate()
			
			const now = new Date();
			const toDay = formatDate(now, 'yyyy/mm/dd')
			this.day = toDay
			this.getToday(toDay)
		},
		methods: {
			timeClick(index) {
				this.timeType = index
			},
			
			teacherConfirm(res) {
				console.log(res)
				this.teacherInfo = res[0]
				this.selected = []
				this.checkInfo = null
				this.getMonthRecord()
			},
			
			getMonthRecord() {
				getMonthRecordByTch({staffId: this.teacherInfo.value, month: this.month}).then(res => {
					console.log(res);
					for (let index in res.data) {
						let item = res.data[index];
						let ob = {
							date: formatDateByTimestamp(item.checkInTime, 'yyyy/mm/dd'),
							info: '签到'
						};
						if (item.checkStatus === 2) {
							ob.info = '离园';
						}
						this.selected.push(ob);
					}
					console.log(this.selected);
				}).catch(error => {
					console.log(error);
				})
			},
			
			leftClick() {
				this.position -= 1;
				this.getWeekDate();
			},
			rightClick() {
				this.position += 1;
				this.getWeekDate();
			},
			
			getWeekDate() {
				const now = new Date();
				const day = this.position * 7;
				now.setDate(now.getDate() + day);
				const beginDate = getWeekFirstDay(now);
				const endDate = getWeekLastDay(now);
				const list = []
				for (let index = 0; index < 7; index++) {
					const date = new Date();
					date.setDate(beginDate.getDate() + index)
					list.push(formatDate(date, 'yyyy-mm-dd'))
				}
				this.weekNameList = list
				console.log(this.weekNameList)
				let maxCount = 0;
				this.beginDateStr = formatDate(beginDate, 'yyyy年mm月dd日');
				this.endDateStr = formatDate(endDate, 'yyyy年mm月dd日');
				getStaffCheck({beginDate: formatDate(beginDate, 'yyyy/mm/dd 00:00:00'), endDate: formatDate(endDate, 'yyyy/mm/dd 23:59:59'), pageSize: 999}).then(res => {
					console.log(res)
					
					this.maxCount = res.data.length
					this.weekList = res.data
				})
			},
			
			dayConfirm(res) {
				console.log(res)
				this.day = `${res.year}/${res.month}/${res.day}`
				this.getToday(this.day)
			},
			getToday(toDay) {
				const beginDateStr = `${toDay} 00:00:00`
				const endDateStr = `${toDay} 23:59:59`
				getStaffCheckList({beginDate: beginDateStr, endDate: endDateStr, pageSize: 999}).then(res => {
					console.log(res)
					this.dayList = res.data[0].childrenList
				})
			},
			
			getAttendanceByDay(day) {
				getDailyRecordByTch({staffId: this.teacherInfo.value, day: day}).then(res => {
					this.checkInfo = res.data[res.data.length - 1];
				})
			},
			
			change(res) {
				this.checkInfo = null;
				this.leaveShowList = [];
				let extraInfo = res.extraInfo;
				if (!this.$u.test.isEmpty(extraInfo)) {
					this.getAttendanceByDay(extraInfo.date);
				}
			},
			
			monthSwitch(res){
				console.log(res);
				this.checkInfo = null;
				this.month = `${res.year}/${res.month}`;
				this.getMonthRecord();
			},
			
			formatTime(timestamp, fmt) {
				if (this.$u.test.isEmpty(timestamp)) {
					return '-';
				}
				return formatDateByTimestamp(timestamp, fmt)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		.top{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			
			.time-view{
				display: flex;
				flex-direction: row;
				
				.time{
					width: 100rpx;
					height: 100rpx;
					background: #FFFFFF;
					border: 2rpx solid rgba(0,0,0,0.1);
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
				.time-check{
					background: #e1f0e9;
				}
			}
			
			.search-view{
				
			}
		}
		.content-day{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			
			.head{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 10rpx;
				font-weight: bold;
				
				.state{
				}
			}
			
			.day-item{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx;
				
				.state{
					display: flex;
					flex-direction: column;
				}
			}
			
			.day-item-gray{
				background: #f9f9f9;
			}
		}
		
		.content-month{
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		
		.content-week{
			.top-date-view{
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				
				.circle-date{
					width: 40rpx;
					height: 40rpx;
					background-color: $app-check-color;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.title{
					margin-left: 30rpx;
					margin-right: 30rpx;
				}
			}
			.td {
				overflow: hidden;
				flex: 1;
			}
		}
	}
</style>
